<template>
  <div class="order-list-container">
    <!-- 页面标题 -->
    <el-page-header content="订单管理" class="page-header" />

    <!-- 筛选搜索区域 -->
    <el-card shadow="hover" class="filter-card">
      <el-row :gutter="20">
        <!-- 订单号搜索 -->
        <el-col :span="6">
          <el-input
            v-model="searchForm.orderNo"
            placeholder="请输入订单号搜索"
            clearable
            prefix-icon="Search"
          />
        </el-col>

        <!-- 用户ID搜索 -->
        <el-col :span="6">
          <el-input
            v-model="searchForm.userId"
            placeholder="请输入用户ID搜索"
            clearable
            prefix-icon="User"
            type="number"
          />
        </el-col>

        <!-- 日期范围筛选 -->
        <el-col :span="8">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择订单创建日期范围"
            value-format="YYYY-MM-DD"
          />
        </el-col>

        <!-- 搜索/重置按钮 -->
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch" class="mr-2">
            <el-icon><Search /></el-icon> 搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon><RefreshLeft /></el-icon> 重置
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单表格区域（无分页） -->
    <el-card shadow="hover" class="table-card" style="margin-top: 16px;">
      <!-- 筛选结果统计 -->
      <div class="result-count" style="margin-bottom: 12px;">
        共找到 <span class="count-number">{{ filteredOrderList.length }}</span> 条订单记录
      </div>

      <el-table
        :data="filteredOrderList"
        border
        stripe
        :header-cell-style="{ 'text-align': 'center', 'background-color': '#fafafa' }"
        :cell-style="{ 'text-align': 'center' }"
        row-key="id"
        v-loading="loading"
        element-loading-text="加载中..."
        :height="tableHeight"
      >
        <!-- 序号列 -->
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <!-- 订单号 -->
        <el-table-column label="订单号" prop="orderNo" min-width="160">
          <template #default="scope">
            <span class="order-no">{{ scope.row.orderNo }}</span>
          </template>
        </el-table-column>

        <!-- 用户ID -->
        <el-table-column label="用户ID" prop="userId" width="120" />

        <!-- 购买数量 -->
        <el-table-column label="购买数量" prop="quantity" width="120" />

        <!-- 单价 -->
        <el-table-column label="单价(元)" prop="unitPrice" width="120">
          <template #default="scope">
            {{ formatPrice(scope.row.unitPrice) }}
          </template>
        </el-table-column>

        <!-- 订单总价 -->
        <el-table-column label="订单总价(元)" width="140">
          <template #default="scope">
            {{ formatPrice(scope.row.quantity * scope.row.unitPrice) }}
          </template>
        </el-table-column>

        <!-- 参观日期 - 不格式化，显示原始值 -->
        <el-table-column label="参观日期" prop="visitDate" min-width="180" />

        <!-- 订单状态 -->
        <el-table-column label="订单状态" prop="status" width="140">
          <template #default="scope">
            <el-tag type="success" size="small">
              {{ formatStatus(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 创建时间 - 不格式化，显示原始值 -->
        <el-table-column label="创建时间" prop="createTime" min-width="160" />

        <!-- 支付时间 - 不格式化，显示原始值 -->
        <el-table-column label="支付时间" prop="payTime" min-width="160" />

        <!-- 操作列 -->
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button
              type="text"
              color="#409EFF"
              @click="handleViewDetail(scope.row)"
              size="small"
            >
              查看详情
            </el-button>
            <el-button
              type="text"
              color="#67C23A"
              @click="handleExportOrder(scope.row)"
              size="small"
            >
              导出订单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElCard,
  ElRow,
  ElCol,
  ElInput,
  ElDatePicker,
  ElButton,
  ElTag,
  ElPageHeader,
  ElMessage
} from 'element-plus'
import { Search, RefreshLeft, User } from '@element-plus/icons-vue'

// 原始订单数据
const rawOrderList = ref([
  {
    "id": 1,
    "orderNo": "202506200001",
    "userId": 1,
    "tickets": null,
    "ticketsTypeId": null,
    "quantity": 2,
    "unitPrice": 115.00,
    "visitDate": "2025-06-24T16:00:00.000+00:00",
    "status": "1",
    "createTime": "2025-06-20T10:00:00",
    "payTime": "2025-06-20T10:00:00"
  },
  {
    "id": 2,
    "orderNo": "202506200002",
    "userId": 2,
    "tickets": null,
    "ticketsTypeId": null,
    "quantity": 1,
    "unitPrice": 57.00,
    "visitDate": "2025-06-25T16:00:00.000+00:00",
    "status": "1",
    "createTime": "2025-06-20T10:05:00",
    "payTime": "2025-06-20T10:05:00"
  },
  // 此处省略其他订单数据，实际使用时需包含完整数据
])

// 搜索筛选表单
const searchForm = ref({
  orderNo: '',
  userId: '',
  dateRange: []
})

// 表格状态
const loading = ref(false)
const tableHeight = ref('600px')

// 筛选后的订单列表
const filteredOrderList = computed(() => {
  return rawOrderList.value.filter(order => {
    // 订单号筛选
    const matchOrderNo = searchForm.value.orderNo
      ? order.orderNo.toLowerCase().includes(searchForm.value.orderNo.toLowerCase())
      : true

    // 用户ID筛选
    const matchUserId = searchForm.value.userId
      ? order.userId === Number(searchForm.value.userId)
      : true

    // 日期范围筛选
    const matchDateRange = searchForm.value.dateRange.length
      ? (
          new Date(order.createTime) >= new Date(searchForm.value.dateRange[0]) &&
          new Date(order.createTime) <= new Date(`${searchForm.value.dateRange[1]} 23:59:59`)
        )
      : true

    return matchOrderNo && matchUserId && matchDateRange
  })
})
import  axios  from '@/http/request'
// 初始化表格高度
onMounted( async() => {
  const windowHeight = window.innerHeight
  if (windowHeight < 800) {
    tableHeight.value = '450px'
  }
  // rawOrderList
  let res = await axios.get('/order/list')
  if(res.data!=null){
    ElMessage.success("查询成功")
    rawOrderList.value = res.data
  }else{
    ElMessage.error("查询失败")
  }
})

// 格式化金额
const formatPrice = (price) => {
  return Number(price).toFixed(2)
}

// 格式化订单状态
const formatStatus = (status) => {
  const statusMap = {
    '1': '已支付',
    '2': '未支付',
    '3': '已取消',
    '4': '已退款'
  }
  return statusMap[status] || '未知状态'
}

// 搜索处理
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    if (filteredOrderList.value.length === 0) {
      ElMessage({
        message: '未找到符合条件的订单',
        type: 'info'
      })
    }
  }, 300)
}

// 重置处理
const handleReset = () => {
  searchForm.value = {
    orderNo: '',
    userId: '',
    dateRange: []
  }
  handleSearch()
}

// 查看详情
const handleViewDetail = (order) => {
  ElMessage({
    message: `查看订单 ${order.orderNo} 详情`,
    type: 'info'
  })
}

// 导出订单
const handleExportOrder = (order) => {
  ElMessage({
    message: `订单 ${order.orderNo} 导出成功`,
    type: 'success'
  })
}
</script>

<style scoped>
.order-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  font-size: 18px;
}

.filter-card {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 16px;
}

.table-card {
  background-color: #fff;
  padding: 20px;
}

.result-count {
  font-size: 14px;
  color: #666;
}
.count-number {
  color: #409EFF;
  font-weight: 700;
  margin: 0 4px;
}

.order-no {
  color: #409EFF;
  cursor: pointer;
  transition: color 0.2s;
}
.order-no:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* 表格滚动条样式优化 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
</style>
